import React from 'react';
import { Breadcrumb, Input, Row, Col, Button, Modal, Checkbox, Icon, Tree, message, Table } from 'antd';
import Config from '../../common/config';
import Region from '../../common/region';
import $ from 'jquery';
import './postage.less';

const CheckboxGroup = Checkbox.Group;
const config = new Config();
const TreeNode = Tree.TreeNode;
const token = sessionStorage.getItem('token');

export default class PostageDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            postageType: this.props.params.postageId, //支付方式，是在线还是货到付款
            area: '', //配送范围
            visible: false, //新增模态框显示
            basic: '', //基础邮费
            extra: 10, //额外邮费
            data: [], //邮费设置数据 
            areaData: [], //穿梭框原始数据
            surplusLeft: [], //左边穿梭框未选择剩余数据
            surplusRight: [], //右边穿梭框未选择剩余数据
            checkArea: [], //已经选择的剩余地区数组中的地区
            checkTargetArea: [], //已经选择的目标地区数组中的地区
            checkedLeftKeys: [], //当前已经勾选左边的地区选择的复选框地址
            checkedRightKeys: [], //当前已经勾选右边的地区选择的复选框地址
            postageData: [], //邮费设置列表数据 用于列表显示
            settings: '', //系统设置 用于获取基础邮费
            saveType: 1, //模态框确定保存状态，1为新增，0为编辑
            editArea: '', //当前编辑的地区条目的下标
        }
        this.handleOk = this.handleOk.bind(this);
        this.handleCancel = this.handleCancel.bind(this)
        this.savePostage = this.savePostage.bind(this);
    }
    componentDidMount() {
        //console.log('状态', this.state.postageType);
        Promise.resolve(this.getMock())
            .then(this.getData());
        this.getSystemsetting();
    }
    //获取系统设置
    getSystemsetting() {
        $.ajax({
            url: `${config.JuseSystem}/globalSetting/detail`,
            type: 'get',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            success: res => {
                console.log(res)
                if (res.code == 200) {
                    this.setState({
                        settings: res.data,
                    });
                } else {
                    message.error('获取系统设置信息失败', 2);
                }
            }
        })
    }
    //获取邮费设置数据
    getData() {
        let url = this.state.postageType == 0 ? '/postageSetting/onlineList' : '/postageSetting/cashList'
        //console.log(typeof this.state.postageType, url);
        $.ajax({
            url: config.JuseSystem + url,
            type: 'get',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            success: data => {
                console.log(data);
                if (data.code == 200) {
                    let postageData = data.data;
                    if (postageData.length) {
                        postageData = postageData.map(item => {
                            item.key = item.id;
                            return item
                        })
                    }
                    //console.log(postageData);
                    let surplusLeft = this.state.surplusLeft;
                    if (postageData.length) {
                        postageData.forEach(item => {
                            let itemArea = JSON.parse(item.area);
                            itemArea.forEach(son => {
                                surplusLeft.forEach((area, i) => {
                                    if (son.name == area.name) {
                                        //console.log('name', son, area)
                                        if (son.child.length == area.child.length) {
                                            surplusLeft.splice(i, 1);
                                        } else {
                                            son.child.forEach(itemChild => {
                                                area.child.forEach((child, i) => {
                                                    if (child.name == itemChild.name) {
                                                        area.child.splice(i, 1);
                                                    }
                                                })
                                            })
                                        }
                                    }
                                })
                            })

                        })
                    }
                    //console.log(postageData, surplusLeft)
                    postageData.push({ key: 'add', id: '', area: '', basicPostage: '', extraPostage: '' });
                    this.setState({ postageData })
                }
            }
        })
    }
    //模态框确定事件
    handleOk() {
        let targetArea = this.state.surplusRight;
        let postageData = [].concat(this.state.postageData);
        let actionData = [];
        let index = this.state.editArea;
        //console.log('index',index,postageData[index]);
        //console.log('all',this.state.areaData);
        if (targetArea.length) {
            //判断是编辑还是新增 this.state.saveType = 1是新增 0 是编辑
            console.log(this.state.saveType);
            if (this.state.saveType) {
                postageData.forEach((item, i) => {
                    console.log(item);
                    if (!item.area) {
                        actionData = postageData.splice(i, 1);
                    }
                })
                if (targetArea.length) {
                    //console.log(JSON.stringify(targetArea));
                    let item = {
                        id: postageData.length + 1,
                        key: postageData.length + 1,
                        area: JSON.stringify(targetArea),
                        extraPostage: '0',
                    }
                    if (this.state.postageType == 0) {
                        item.basicPostage = this.state.settings.onlineBasicPostage
                    } else {
                        item.basicPostage = this.state.settings.cashBasicPostage
                    }
                    postageData.push(item);
                }
                //console.log('actionData', actionData);
                postageData.push(actionData[0]);
            } else {
                console.log('targetArea', targetArea);
                console.log('postageData', postageData, index);
                postageData[index].area = JSON.stringify(targetArea);
            }
            console.log(postageData);
            this.setState({
                visible: false,
                surplusRight: [],
                checkedLeftKeys: [],
                checkedRightKeys: [],
                postageData,
                saveType: 1,
                editArea: ''
            })
        } else {
            //console.log('none',JSON.parse(postageData[0].area),this.state.surplusLeft);
            let surplusLeft = this.state.surplusLeft;
            postageData.forEach(item => {
                if (item.area) {
                    let itemArea = JSON.parse(item.area);
                    itemArea.forEach(son => {
                        surplusLeft.forEach((obj, i) => {
                            if (son.name == obj.name) {
                                if (son.child.length == obj.child.length) {
                                    surplusLeft.splice(i, 1);
                                } else {
                                    son.child.forEach(child => {
                                        obj.child.forEach((objChild, i) => {
                                            if (child.name == objChild.name) {
                                                obj.child.splice(i, 1);
                                            }
                                        })
                                    })
                                }
                            }
                        })
                    })
                }
            })
            console.log(surplusLeft, JSON.parse(postageData[0].area))
            this.setState({
                visible: false,
                saveType: 1
            })
        }

    }
    //模态框取消
    handleCancel() {
        //console.log(this.state.checkArea);
        //console.log(this.state.checkTargetArea);
        //console.log('left',this.state.surplusLeft);
        //console.log('right',this.state.surplusRight);
        //console.log('all',this.state.areaData);
        let postageData = this.state.postageData;
        let allarea = this.getCloneData(this.state.areaData);
        let surplusRight = this.getCloneData(this.state.surplusRight);
        let surplusLeft = this.getCloneData(this.state.surplusLeft);
        //console.log('oldRight',surplusRight);
        postageData.forEach(data => {
            //console.log(data);
            if (data.area) {
                //console.log('area',JSON.parse(data.area))
                let dataArea = JSON.parse(data.area);
                dataArea.forEach(item => {
                    surplusRight.forEach((obj, i) => {
                        if (item.name == obj.name) {
                            //console.log(item,obj);
                            surplusRight.splice(i, 1);
                        }
                    })
                })
            }
        })
        //console.log('newRight',surplusRight);
        surplusLeft.push(...surplusRight);
        surplusLeft.sort((a, b) => a.ID - b.ID);
        //console.log(surplusLeft);
        //清空数据
        this.setState({
            visible: false,
            checkedLeftKeys: [], //左边选择的复选框值
            checkedRightKeys: [], //右边选择的复选框值
            surplusRight: [], //右边选择的地区数据为空
            surplusLeft,
            editArea: '',
        })
    }

    //获取地区本地数据
    getMock() {
        let data = this.getCloneData(Region);
        data = data.map(item => {
            item.key = item.name;
            item.level = 1;
            item.child = item.child.map(obj => {
                obj.checked = false;
                obj.key = obj.name
                obj.child = [];
                obj.level = 2;
                return obj;
            })
            return item;
        })
        //console.log(data);
        let surplusLeft = [].concat(data);
        let areaData = [].concat(data);
        this.setState({ surplusLeft, areaData });
    }
    //重新克隆引用类型对象的数据，即数组中对象，对象中数组的克隆
    getCloneData(arr) {
        let newArr = [].concat(arr);
        newArr = newArr.map(item => {
            let newItem = {
                ID: item.ID,
                key: item.name,
                name: item.name,
                code: item.code,
                child: [].concat(item.child),
            }
            if (item.child.length) {
                newItem.child = item.child.map(child => {
                    let newChild = {
                        ID: child.ID,
                        key: child.name,
                        name: child.name,
                        code: child.code,
                        child: [],
                    }
                    return newChild;
                })
            }
            return newItem;
        })
        return newArr;
    }
    //点击添加新配送地区模态框中 穿梭框中左右确定移动按钮事件，key=1为选择即左移，key=0为取消选择即右移
    selectAreaTo(key) {
        //创建一个变量 根据参数判断是左移还是右移来赋予不同的值 该值是相应区域选择的地区数据
        let area;
        //左移右移方法大体类似
        if (key) {
            console.log('左移');
            area = this.state.checkTargetArea;
            //保存已选择的地区数组
            let surplusRight = this.getCloneData(this.state.surplusRight);

            //遍历选中的的数组，从剩余地区数组中剔除选中地区数组
            area.forEach(item => {
                //遍历剩余未选择的地区数组，找到已选择数组的数据然后从剩余数组中删除
                surplusRight.forEach((obj, i) => {
                    if (item.name == obj.name) {
                        if (item.child.length == obj.child.length) {
                            surplusRight.splice(i, 1);
                        } else {
                            item.child.forEach(itemChild => {
                                obj.child.forEach((objChild, j) => {
                                    if (itemChild.name == objChild.name) {
                                        obj.child.splice(j, 1);
                                    }
                                })
                            })
                        }
                        //console.log('移动循环内',item,obj)
                        if (!obj.child.length) {
                            surplusRight.splice(i, 1);
                        }
                    }
                })
            });
            //保存右边剩余数据 将选择的数据压入剩余数据之中 然后排序
            let targetArea = this.getCloneData(this.state.surplusLeft);
            console.log(targetArea, area);
            if (targetArea.length) {
                targetArea.forEach(target => {
                    area.forEach(obj => {
                        if (target.name == obj.name) {
                            target.child = [].concat(target.child).concat(obj.child);
                            target.child = this.removeSameOBJ(target.child);
                            console.log('get', target.child, area)
                            target.child.sort((a, b) => a.ID - b.ID);
                        } else {
                            targetArea.push(obj);
                        }
                        //console.log('循环内',target.child,obj.child)
                    })
                })
            } else {
                targetArea.push(...area);
            }
            //通过hash数组的方法将数组中对象去重
            targetArea = this.removeSameOBJ(targetArea);
            targetArea.sort((a, b) => a.ID - b.ID);
            //console.log('右边选中数组', targetArea, surplusRight)
            this.setState({
                surplusRight,
                surplusLeft: targetArea,
                checkTargetArea: [],
                checkArea: [],
                checkedRightKeys: [], //清空选择复选框
            })
        } else {
            console.log('右移');
            //保存选中的地区数组
            area = this.state.checkArea;
            //保存剩余的地区数组
            let surplusLeft = this.getCloneData(this.state.surplusLeft);
            //遍历选中的的数组，从剩余地区数组中剔除选中地区数组
            console.log('移动前', area, surplusLeft);
            area.forEach(item => {
                //遍历剩余未选择的地区数组，找到已选择数组的数据然后从剩余数组中删除
                surplusLeft.forEach((obj, i) => {
                    if (item.name == obj.name) {
                        if (item.child.length == obj.child.length) {
                            surplusLeft.splice(i, 1);
                        } else {
                            item.child.forEach(itemChild => {
                                obj.child.forEach((objChild, j) => {
                                    if (itemChild.name == objChild.name) {
                                        obj.child.splice(j, 1);
                                    }
                                })
                            })
                        }
                        //console.log('obj',obj);
                        if (!obj.child.length) {
                            surplusLeft.splice(i, 1);
                        }
                    }
                })
            });
            //console.log('截取',area,surplusLeft);
            //保存右边剩余数据 将选择的数据压入剩余数据之中 然后排序
            let targetArea = this.getCloneData(this.state.surplusRight);
            if (targetArea.length) {
                targetArea.forEach(target => {
                    area.forEach(obj => {
                        if (target.name == obj.name) {
                            target.child = [].concat(target.child).concat(obj.child);
                            target.child = this.removeSameOBJ(target.child);
                            //console.log('get',target.child)
                            target.child.sort((a, b) => a.ID - b.ID);
                        } else {
                            targetArea.push(obj);
                        }
                    })
                })
                //console.log('targetarea', targetArea);
            } else {
                targetArea.push(...area);
            }
            //通过hash数组的方法将数组中对象去重
            targetArea = this.removeSameOBJ(targetArea);
            //console.log('移动后', area, targetArea)
            //targetArea.push(...area);
            //排序 按照原始数据的顺序进行排列显示
            targetArea.sort((a, b) => a.ID - b.ID);
            //保存 改变状态渲染显示 
            //console.log(this.state.postageData);
            //console.log('left', surplusLeft)
            this.setState({
                surplusLeft,
                surplusRight: targetArea,
                checkArea: [],
                checkTargetArea: [],
                checkedLeftKeys: [],
            });
        }
    }
    //点击选择一级地区事件 传入参数item为当前地区及下级数据,i为当前地区所在数据数组中的下标 n为事件出发位置
    checkArea(n, checkedKeys, props) {
        /*
        *n事件发生区域1左0右
        *checkedKeys，props为组件自带参数 checkedKeys为选中值的数组 props为所触发事件组件
        */
        //console.log(n, checkedKeys, props);
        //保存已选择的checkedKeys;
        let checkedList = n ? this.state.checkedLeftKeys : this.state.checkedRightKeys;
        //根据n来判断 保存已经选择的地址保存 0保存右边 1保存左边
        let checkArea = n ? this.state.checkArea : this.state.checkTargetArea;
        //保存能选择的地区数据
        let surplusLeft = this.getCloneData(this.state.surplusLeft);
        let surplusRight = this.getCloneData(this.state.surplusRight);
        //判断组件中是否有半选中的一级地区节点，即未选慢二级地区的一级地区节点
        if (props.halfCheckedKeys.length) {
            //console.log(props.halfCheckedKeys);
            //创建一个新数组 用于保存截取出来的选择的二级地区数据
            let newChild = [];
            let areaList = n ? surplusLeft : surplusRight;
            //遍历半选中的一级地区数据节点 找到其所在选中的二级地区节点 压入新数组保存
            props.halfCheckedKeys.forEach(half => {
                areaList.forEach((area, i) => {
                    if (area.name == half) {
                        area.child.forEach((child, j) => {
                            if (checkedKeys.includes(child.name)) {
                                newChild.push(child);
                            }
                        })
                        //创建一个新的一级地区数据 用于保存在穿梭框右边选择的地区
                        let data = { ID: area.ID, name: area.name, code: area.code, child: newChild };
                        //console.log('find',area,checkedKeys,newChild,this.state.surplusLeft);
                        checkArea.forEach(check => {
                            if (check.name == data.name) {
                                check.child = newChild;
                            }
                        })
                        checkArea.push(data);
                    }
                })
            })
        }
        if (!checkedKeys.length) {
            checkArea = [];
        }

        //遍历所有数据 找到选择的全选的一级地区 
        let list = n ? surplusLeft : surplusRight;
        // checkArea.forEach(item=>{
        //     list.forEach((area, i) => {
        //         if(area.name == item.name){
        //             if(checkedKeys.includes(item.name)){
        //                 item.child = area.child;
        //             }
        //         }
        //     })
        // })
        list.forEach((area, i) => {
            if (checkedKeys.includes(area.name)) {
                checkArea.forEach(item => {
                    // console.log(item, area);
                    if (item.name == area.name) {
                        item.child = area.child
                    }
                })
                // console.log(area);
                // console.log(checkedKeys);
                checkArea.push(area);
            }
        })

        checkArea = this.removeSameOBJ(checkArea);
        // console.log(checkArea);
        //console.log(checkArea, surplusLeft,checkedKeys,list);
        //判断触发事件是在穿梭框的左边还是右边
        if (n) {
            this.setState({
                checkArea: checkArea,
                checkedLeftKeys: checkedKeys,
                surplusLeft,
            })
        } else {
            this.setState({
                checkTargetArea: checkArea,
                checkedRightKeys: checkedKeys,
                surplusLeft,
            })
        }
        // console.log(area);
    }
    //数组对象去重
    removeSameOBJ(arr) {
        let hash = {};
        arr = arr.reduce(function (item, next) {
            hash[next.name] ?
                ''
                :
                hash[next.name] = true && item.push(next);
            return item
        }, [])
        return arr;
    }
    //改变列表中的某条信息的额外邮费设置
    changeExtra(i, e) {
        let value = e.target.value.replace(/[^\d]/g, "")
        //console.log(i,value);
        let list = this.state.postageData;
        list[i].extraPostage = value;
        console.log(list[i].extraPostage);
        this.setState({
            postageData: list
        })
    }
    //删除邮费设置地区条目
    deleteArea(key) {
        console.log(this.state.postageData);
        Modal.confirm({
            title: '删除邮费设置',
            content: '确认删除此设置吗？',
            onOk: () => {
                let list = this.state.postageData;
                let surplusLeft = this.state.surplusLeft;
                let delArea = JSON.parse(list.splice(key, 1)[0].area);
                console.log(delArea);
                delArea.forEach(del => {
                    surplusLeft.forEach(item => {
                        if (del.name == item.name) {
                            item.child = item.child.concat(del.child);
                            item.child.sort((a, b) => a.ID - b.ID);
                        } else {
                            surplusLeft.push(del);
                        }
                    })
                })
                surplusLeft = this.removeSameOBJ(surplusLeft);
                surplusLeft.sort((a, b) => a.ID - b.ID);
                console.log(surplusLeft);
                this.setState({ postageData: list, surplusLeft, })
            }
        })
    }
    //编辑邮费设置条目
    editArea(record, i) {
        //第一个参数record为传入的需要编辑的数据 第二个参数i为邮费设置列表数据下标
        //console.log('编辑参数', record,i);
        //重新创建一个新的全部地址数据数组 用于遍历截取出需要的数据 保存 用于编辑

        //保存编辑项已选择的地区数据
        let targetArea = JSON.parse(record.area);
        //console.log(areaData, targetArea);
        this.setState({
            saveType: 0, //保存状态为编辑
            visible: true,
            surplusRight: targetArea,
            editArea: i
        })
        //console.log('编辑', targetArea, areaData);

    }
    //保存邮费设置
    savePostage() {
        //保存提交的数据 因为显示原因在数据请求过来的同时加上了react的key
        //遍历数据删除对象中的key
        let Data = this.state.postageData.slice(0, -1);
        Data = Data.map(item => {
            //console.log(item);
            delete item.key;
            let area = JSON.parse(item.area);
            if (area.length) {
                area = area.map(item => {
                    delete item.key;
                    return item;
                })
            }
            item.area = JSON.stringify(area);
            return item
        })
        Data.forEach((item, i) => {
            console.log('item', item);
            let itemArea = item.area ? JSON.stringify(item.area) : [];
            if (!itemArea.length) {
                return message.error(`第${i + 1}条信息地址不能为空`)
            }
        })
        let url = this.state.postageType == 0 ? '/postageSetting/updateOnlineList' : '/postageSetting/updateCashList'
        console.log(Data);
        $.ajax({
            url: config.JuseSystem + url,
            type: 'post',
            data: { postageData: Data },
            dataType: 'json',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            success: data => {
                // console.log(data);
                if (data.code == 200) {
                    window.location.hash = '/postage'
                } else {
                    message.error('服务器繁忙');
                }
            }
        })
    }
    componentWillUnmount() {
        window.onbeforeunload = function () {
            return '确认离开页面吗？'
        }
    }
    render() {
        //穿梭框左边地区数据
        let leftTreeList = this.state.surplusLeft.map((item, i) => {
            return (
                <TreeNode title={item.name} key={item.name} value={JSON.stringify(item)}>
                    {
                        item.child.map((child, j) => {
                            return (
                                <TreeNode title={child.name} key={child.name} value={JSON.stringify(child)} />
                            )
                        })
                    }
                </TreeNode>
            )
        })
        //穿梭框右边地区数据
        let rightTreeList = this.state.surplusRight.map((item, i) => {
            return (
                <TreeNode title={item.name} key={item.name} value={JSON.stringify(item)}>
                    {
                        item.child.map((child, j) => {
                            return (
                                <TreeNode title={child.name} key={child.name} value={JSON.stringify(child)} />
                            )
                        })
                    }
                </TreeNode>
            )
        })

        const columns = [
            {
                title: '配送区域', dataIndex: '', key: 'postagearea', width: '50%', render: (record, i) => {
                    if (record.area) {
                        //console.log(JSON.parse(record.area));
                        //保存数据中的选择的地区
                        let recordArea = this.getCloneData(JSON.parse(record.area));
                        let areaData = this.state.areaData;
                        //创建一个新数组 用于保存显示的地区名字
                        let areaList = [];
                        //console.log(areaData);
                        //遍历数据中的地区和所有地区进行匹配，如果省全选则只显示省名字 如果没全选则显示下级市名字
                        recordArea.forEach((tar, j) => {
                            areaData.forEach(area => {
                                if (tar.name == area.name) {
                                    if (tar.child.length == area.child.length) {
                                        areaList.push({ level: 1, name: tar.name });
                                    } else {
                                        tar.child.forEach((child, k) => {
                                            areaList.push({ level: 2, name: child.name })
                                        })
                                    }
                                }
                            })
                        })
                        //console.log(areaList);
                        return (
                            <div key={i}>
                                {
                                    areaList.map((item, i) => {
                                        if (item.level == 1) {
                                            return <span key={i} style={{ color: '#000', fontWeight: 'bold' }}>
                                                {i < areaList.length - 1 ? item.name + '、' : item.name}
                                            </span>
                                        } else {
                                            return <span key={i}>{i < areaList.length - 1 ? item.name + '、' : item.name}</span>
                                        }
                                    })
                                }
                            </div>
                        )
                    } else {
                        return {
                            children: <div style={{ textAlign: 'left' }}><a onClick={(e) => { e.preventDefault(); this.setState({ visible: true }) }}>添加配送区域</a></div>,
                            props: {
                                colSpan: 4,
                            },
                        };
                    }

                }
            },
            {
                title: ' ', dataIndex: '', key: 'editArea', width: '15%', render: (text, record, i) => {
                    if (record.area) {
                        return (
                            <div key={i}>
                                <span className='postageEdit' onClick={this.editArea.bind(this, record, i)}>编辑</span><br />
                                <span className='postageEdit' onClick={this.deleteArea.bind(this, i)}>删除</span>
                            </div>
                        )
                    } else {
                        return { children: '', props: { colSpan: 0 } }
                    }
                }
            },
            {
                title: '基础邮费', dataIndex: 'basicPostage', width: '15%', key: 'basic'
            },
            {
                title: '额外邮费', dataIndex: 'extraPostage', width: '20%', key: 'extra', render: (text, record, i) => {
                    if (record.area) {
                        return <Input key={i} value={text ? text : 0} onChange={this.changeExtra.bind(this, i)} />
                    } else {
                        return { children: '', props: { colSpan: 0 } }
                    }
                }
            }
        ];
        return (
            <div className='postageBox'>
                <div className='spgl2-1 clearfix'>
                    <Breadcrumb separator=">">
                        <Breadcrumb.Item>首页</Breadcrumb.Item>
                        <Breadcrumb.Item><span className='separator-a'>系统设置</span></Breadcrumb.Item>
                    </Breadcrumb>
                </div>
                <div className='postageDetail'>
                    <Row style={{ lineHeight: '40px', marginBottom: 10 }}>
                        <Col span={4}>支付方式：</Col>
                        <Col span={20}>{this.state.postageType == 0 ? '在线支付' : '货到付款'}</Col>
                    </Row>
                    <Row>
                        <Col span={4}>配送区域：</Col>
                        <Col span={20} className='dispatching'>
                            <Table columns={columns} dataSource={this.state.postageData} pagination={false} bordered />
                        </Col>
                    </Row>
                </div>
                <div className='postageBtn'>
                    <Button type='primary' onClick={this.savePostage}>保存</Button>
                    <Button style={{ marginLeft: 20 }} onClick={() => { window.location.hash = '/postage' }}>返回</Button>
                </div>
                <Modal
                    visible={this.state.visible}
                    title='选择可配送区域'
                    onCancel={this.handleCancel}
                    onOk={this.handleOk}
                    width={700}
                    maskClosable={false}
                >
                    <div className='transfer'>
                        <div className='transfer-list'>
                            <div className='transfer-list-header'>
                                <span>可选择区域</span>
                                <span className='rf'>{this.state.checkArea.length}/{this.state.surplusLeft.length}</span>
                            </div>
                            <div className='transfer-list-body'>
                                <div className='transfer-list-content'>
                                    <Tree
                                        checkable
                                        onCheck={this.checkArea.bind(this, 1)}
                                        checkedKeys={this.state.checkedLeftKeys}
                                    >
                                        {leftTreeList}
                                    </Tree>

                                </div>
                            </div>
                        </div>
                        <div className='transfer-operation'>
                            <Button type='primary' size='small' onClick={this.selectAreaTo.bind(this, 0)}><Icon type="right" /></Button>
                            <Button type='primary' size='small' style={{ marginTop: 5 }} onClick={this.selectAreaTo.bind(this, 1)}><Icon type="left" /></Button>
                        </div>
                        <div className='transfer-list'>
                            <div className='transfer-list-header'>
                                <span>已选择区域</span>
                                <span className='rf'>{this.state.checkTargetArea.length}/{this.state.surplusRight.length}</span>
                            </div>
                            <div className='transfer-list-body'>
                                <div className='transfer-list-content'>
                                    <Tree
                                        checkable
                                        onCheck={this.checkArea.bind(this, 0)}
                                        checkedKeys={this.state.checkedRightKeys}
                                    >
                                        {rightTreeList}
                                    </Tree>

                                </div>
                            </div>
                        </div>
                    </div>
                </Modal>
            </div>
        )
    }
}